<template>
  <div class="majorEquipment">
    <el-row class="h100">
      <el-col :span="6" class="h100">
        <div class="text-border">
          <div class="text-header tree-header">
            <span>{{ treeName }}</span>
          </div>
          <div class="left">
            <customTree
              ref="customTree"
              :showTitle="false"
              :filterConfig="equipmentFilter"
              :draggable="false"
              nodeKey="id"
              @handleClickTree="handleClickTree"
            ></customTree>
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="h100">
        <div class="text-border">
          <div class="text-header">{{ title }}</div>
          <div class="search">
            <el-input
              placeholder="输入关键字过滤"
              size="mini"
              class="treeInput"
              v-model="filterText"
              suffix-icon="el-icon-search"
              clearable
            ></el-input>
          </div>
          <div class="middle">
            <tableList
              ref="klTable"
              v-bind="tableConfig"
              @selectChange="selectChange"
              @selectAll="selectAll"
              @defaultSelection="checkedUser"
              @radioSelect="radioSelect"
            ></tableList>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="h100">
        <div class="text-border">
          <div class="text-header">
            已选择：
            <span>{{ choseNumber() }}</span>
          </div>
          <div class="right">
            <el-row :gutter="30" style="margin-bottom: 10px" v-if="multiple">
              <el-col :span="8" style="text-align: right">
                <el-button
                  icon="el-icon-delete"
                  size="mini"
                  class="clearBtn"
                  @click="clearAll"
                  >清空</el-button
                >
              </el-col>
            </el-row>
            <div
              v-for="(i, index) in filterData"
              :key="index"
              class="chosedSelect"
              :class="{ isActive: i.id == currentId }"
              @click="clickChosed(i)"
            >
              <span>
                <label>{{ i.name }}</label>
              </span>
              <i
                @click="delItem(index, i)"
                class="el-icon-circle-close select-icon-close"
              ></i>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  getLeftUpperApi,
  lazyClassifyTree,
} from "@/api/equipmentLedger/equipmentManage";
import {
  serchEqBackup, // 查询备品备件
  getClassifyById,
} from "@/api/equipmentLedger/equipmentBackup.js"
import tableList from "./eqTableList.vue";
import customTree from "@/components/customTree/customTree";
export default {
  props: {
    seleteSetting: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: { tableList, customTree },
  data() {
    return {
      treeData: [],
      type: "",
      title: "设备列表",
      treeName: "台账结构",
      radio: { equipmentName: "" }, // 选中数据
      //表格数据配置
      orgCode: "",
      tableConfig: {
        radioShow: false,
        showAllSearch: true,
        showIndex: false,
        selectionShow: true,
        showFilterBtn: false,
        showCustomBtn: false,
        rowKey: "id",
        type: "device",
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          searchArr: [],
          queryData: {
            page: 1,
            pageSize: 15,
          },
        },
        tableMethods: {
          rowClick: (row) => {
            if (
              !this.defaultIds.includes(row.id) &&
              row.isVirtual == "0" &&
              this.isSelect(row)
            ) {
              if (this.multiple) {
                let res = this.chosedData.every((item) => {
                  return item.id != row.id;
                });
                this.selectChange(res, row);
              } else {
                this.$refs.klTable.radioSelect(row);
              }
              this.$refs.klTable.toggleRowSelection(row);
            }
          },
        },
        selectableMethod: (row, rowIndex) => {
          if (
            row.isVirtual == "0" &&
            this.isSelect(row) &&
            !this.defaultIds.includes(row.id)
          ) {
            return true;
          } else {
            return false;
          }
        },
        isDisabled: (row) => {
          if (
            row.isVirtual == "0" &&
            this.isSelect(row) &&
            !this.defaultIds.includes(row.id)
          ) {
            return false;
          } else {
            return true;
          }
        },
        actionList: [],
        column: [
          {
            label: "设备名称",
            prop: "name",
            showTooltip: true,
            formatter: (row) => {
              let isVirtual = row.isVirtual == "1" ? "虚拟" : "实体";
              return `${row.name}(${isVirtual})`;
            },
          },
          {
            label: "设备分类",
            prop: "typeName",
            showTooltip: true,
          },
        ],
        tableData: [],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
        showPagetion: false,
        pageSmall: true,
      },
      multiple: true,
      tableData:[],
      filterData: [],
      chosedData: [],
      defaultIds: [],
      currentId: "",
      filterText: "",
      choseFilter: "",
      filterConfig: "",
      equipmentFilter: {},
    };
  },
  created() {
    this.init();
  },
  mounted() {
    //this.defaultExpend();
  },
  watch: {
    filterText(val) {
      this.filterListTable(val);
    },
    choseFilter(val) {
      this.filterChoseData(val);
    },
    chosedData(val) {
      this.filterChoseData(this.choseFilter);
    },
  },
  methods: {
    init() {
      let {
        chosedData,
        multiple,
        defaultIds,
        filterConfig,
        managerUnit,
        standardType,
      } = this.seleteSetting;
      this.chosedData = chosedData || [];
      this.defaultIds = defaultIds || [];
      this.filterData = JSON.parse(JSON.stringify(this.chosedData));
      this.multiple = multiple;
      this.filterConfig = filterConfig;
      this.equipmentFilter = {
        filterConfig,
        managerUnit,
        standardType,
      };
      if (multiple) {
        this.$set(this.tableConfig, "selectionShow", true);
        this.$set(this.tableConfig, "radioShow", false);
      } else {
        this.$set(this.tableConfig, "selectionShow", false);
        this.$set(this.tableConfig, "radioShow", true);
      }
      filterConfig.forEach((item) => {
        if (item == "hasManagerUnit") {
          this.$set(this.tableConfig.column[2], "hide", false);
        } else if (item == "filterManagerUnit") {
          this.$set(this.tableConfig.column[3], "hide", false);
        } else {
          this.$set(this.tableConfig.column[4], "hide", false);
        }
      });
    },
    //点击树
    handleClickTree(node) {
      // 
      
      this.getEquipmentList(node);
    },
    // 根据设备获取备品备件
    getBackup(data){
      serchEqBackup(data)
        .then(res => {
          if(res.data.list.length){

          }
        })
    },
    getEquipmentList(node) {
      let data = {};
      for (const key in node) {
        if (Object.hasOwnProperty.call(node, key)) {
          data[key] = node[key];
        }
      }
      let params = {
        parentId: node.id,
      };
      if (this.seleteSetting.filterConfig.length > 0) {
        params.configRules = this.seleteSetting.filterConfig.join();
      }
      if (this.seleteSetting.managerUnit.length > 0) {
        params.managerUnits = this.seleteSetting.managerUnit.join();
      }
      if (this.seleteSetting.standardType.length != "") {
        params.standardType = this.seleteSetting.standardType;
      }
      lazyClassifyTree(params)
        .then((res) => {
          let list = JSON.parse(JSON.stringify(res.data));
          list.unshift(data);
          list.forEach((child) => {
            if (
              child.isVirtual == "0" &&
              this.isSelect(child) &&
              !this.defaultIds.includes(child.id)
            ) {
              child.disabled = false;
            } else {
              child.disabled = true;
            }
          });
          this.$set(this.tableConfig, "tableData", list);
          this.tableData = JSON.parse(JSON.stringify(list));
          this.filterListTable(this.filterText);
        })
        .catch((res) => {});
    },
    isSelect(row) {
      let filterManagerUnit = this.filterConfig.includes("filterManagerUnit")
        ? row.filterManagerUnit
        : true;
      let filterStandard = this.filterConfig.includes("filterStandard")
        ? row.filterStandard
        : true;
      let hasManagerUnit = this.filterConfig.includes("hasManagerUnit")
        ? row.hasManagerUnit
        : true;
      return filterManagerUnit && filterStandard && hasManagerUnit;
    },
    //默认选中第一条
    setDefaultRadio() {
      if (!this.multiple) {
        this.radioSelect(this.tableConfig.tableData[0]);
        this.checkedUser();
      }
    },
    //单选框选中时触发
    radioSelect(row) {
      this.chosedData = [row];
    },
    //勾选已选人员或组织
    checkedUser() {
      if (this.chosedData.length > 0) {
        if (this.multiple) {
          this.chosedData.forEach((item) => {
            this.tableConfig.tableData.forEach((value) => {
              if (this.type == "user-select") {
                let idAndOrgId = item.id + item.orgId;
                if (value.idAndOrgId == idAndOrgId) {
                  this.$refs.klTable.selectioned(value);
                }
              } else {
                if (value.id == item.id) {
                  this.$refs.klTable.selectioned(value);
                }
              }
            });
          });
        } else {
          let row = this.chosedData[0];
          row.idAndOrgId = row.id + row.orgId;
          this.$refs.klTable.radioSelect(row);
        }
      }
    },
    //添加或取消已选用户
    selectChange(selected, row) {
      if (selected) {
        let hasSame = false;
        this.chosedData.forEach((item, index) => {
          if (item.id == row.id) {
            hasSame = true;
            this.chosedData.splice(index, 1, row);
            let onceData = this.tableConfig.tableData.find((child) => {
              return child.id == item.id && child.orgId == item.orgId;
            });
            let len = this.tableConfig.tableData.filter(
              (child) => child.id == row.id
            );
            if (len.length > 1) {
              this.$refs.klTable.selectionCalce(onceData);
            }
            //
          }
        });
        if (!hasSame) {
          this.chosedData.push(row);
        }
      } else {
        this.chosedData.forEach((item, i) => {
          if (item.id == row.id) {
            this.chosedData.splice(i, 1);
            return;
          }
        });
      }
    },
    //选择全部
    selectAll(list) {
      this.tableConfig.tableData.forEach((item, i) => {
        if (!item.disabled) {
          this.selectChange(list, item);
        }
      });
    },
    //点击移除的时候触发
    delItem(index, row) {
      if (this.multiple) {
        this.chosedData.forEach((item, i) => {
          if (row.id == item.id) {
            this.chosedData.splice(i, 1);
          }
        });
        this.tableConfig.tableData.map((item) => {
          if (item.id === row.id) {
            this.$refs.klTable.selectionCalce(item);
          }
        });
      } else {
        this.chosedData.splice(index, 1);
        this.filterData.splice(index, 1);
        this.$refs.klTable.radioClick(null);
      }
    },
    //清除所有
    clearAll() {
      this.chosedData.length = 0;
      this.filterData = [];
      this.$refs.klTable.clearSelection();
    },
    //过滤设备列表
    filterListTable(val) {
      let reg = new RegExp(val);
      let data = this.tableData.filter((item) => {
        return item.name.match(reg);
      });
      this.tableConfig.tableData = data;
    },
    //过滤已选人员
    filterChoseData(val) {
      let reg = new RegExp(val);
      this.filterData = this.chosedData.filter((item) => {
        return item.name.match(reg);
      });
    },
    //选择人员或组织数量
    choseNumber() {
      if (["user-select", "user"].includes(this.type)) {
        return `${this.chosedData.length}人`;
      } else {
        return `${this.chosedData.length}个`;
      }
    },
    //展示
    formatter(i) {
      if (i.isOutOrg == 0) {
        return "";
      } else if (i.isOutOrg == 1) {
        return `<span class="outOrg">外部</span>`;
      } else {
        return `<span class="interim">临时</span>`;
      }
    },
    clickChosed(i) {
      this.currentId = i.id;
    },
    //返回选择的数据
    getSelectData() {
      let data = JSON.parse(JSON.stringify(this.chosedData));
      return data;
    },
  },
};
</script>
<style  lang="less" scoped>
.majorEquipment {
  height: calc(100% - 15px);
  /deep/.el-input--mini .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .search {
    width: 40%;
    margin: 0 0 10px 10px;
  }
  .text-border {
    position: relative;
    height: 100%;
    margin: 5px;
    border: 1px #ebebeb solid;
    .text-header {
      height: 40px;
      line-height: 40px;
      padding: 0 14px;
      border-bottom: 1px #ebebeb solid;
      text-align: left;
      font-weight: 700;
      color: #666;
    }
    .tree-header {
      display: flex;
      justify-content: space-between;
    }
    .text-header:first-child {
      margin-bottom: 15px;
    }
    .left {
      height: calc(100% - 40px);
    }
    .middle {
      padding: 0 10px 10px 10px;
      height: calc(100% - 115px);
    }
    .right {
      height: calc(100% - 35px);
      padding: 0 10px;
      .chosedSelect {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 10px;
        line-height: 23px;
      }
      .clearBtn {
        border: 1px solid #0d60b4;
        color: #0d60b4;
      }
      .isActive {
        background-color: #f8f8f8;
      }
    }
    .table-input {
      width: 95% !important;
      margin: 0 auto;
      .tableInputLeft {
        float: left;
        width: 35%;
      }
      .tableInputRight {
        float: right;
        width: 60%;
      }
      .tableInputLeft,
      .tableInputRight {
        height: 30px;
        line-height: 30px;
        border-radius: 2px;
        margin-bottom: 15px;
      }
    }
    .clearF::after {
      content: "";
      display: table;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .select-text {
      float: left;
      margin-left: 10px;
      height: 20px;
      line-height: 12px;
    }
    .select-icon-close {
      float: right;
      margin-right: 10px;
    }
  }
  .outOrg {
    margin-left: 10px;
    background: rgba(250, 162, 36, 0.2);
    //color: #FAA224 ;
    opacity: 0.2;
    color: black;
    border-radius: 4px;
    padding: 1px 4px;
  }
  .interim {
    margin-left: 10px;
    background: rgba(239, 76, 76, 0.2);
    opacity: 0.2;
    border-radius: 4px;
    padding: 1px 8px;
    color: red;
  }
}
</style>